<template>
  <div>
    <a-card class="mb-4">
      <div>
        <a-form-item label="广告名称" :wrapper-col="{ span: 24 }" name="name">
          <a-input class="w-fit" allow-clear v-model:value="form.name" />
        </a-form-item>
        <a-form-item label="素材尺寸" :wrapper-col="{ span: 24 }">
          <div class="flex gap-12">
            <div>
              <div class="text-nowrap text-gray-400">竖屏</div>
              <a-radio-group
                button-style="outline"
                option-type="button"
                v-model:value="form.publicizeSize"
                :options="portraitScreen"
              ></a-radio-group>
            </div>
            <div>
              <div class="text-nowrap text-gray-400">横屏</div>
              <a-radio-group
                button-style="outline"
                option-type="button"
                v-model:value="form.publicizeSize"
                disabled
                :options="landscapeOptions"
              ></a-radio-group>
            </div>
          </div>
        </a-form-item>
        <SelectMaterial></SelectMaterial>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { form } from '../../data/form';
import { landscapeOptions, portraitScreen } from '../../data/options';
import SelectMaterial from './SelectMaterial.vue';
import { currentStep } from './data';

const nextStep = () => {
  currentStep.value += 1;
};
</script>

<style lang="scss" scoped></style>
